<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>CSS技能进阶 | SongKaBaKa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="">
    <meta name="description" content="盒子模型详解整体内容整理自 ，仅供交流学习使用。 了解盒子概念与基本使用盒子模型区别于弹性盒模型，下面是盒子模型的示意图 [                                                                                             BcfQzD.png](https:&#x2F;&#x2F;s1.ax1x.com&#x2F;2020&#x2F;11&#x2F;04&#x2F;Bc">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS技能进阶">
<meta property="og:url" content="https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/index.html">
<meta property="og:site_name" content="SongKaBaKa">
<meta property="og:description" content="盒子模型详解整体内容整理自 ，仅供交流学习使用。 了解盒子概念与基本使用盒子模型区别于弹性盒模型，下面是盒子模型的示意图 [                                                                                             BcfQzD.png](https:&#x2F;&#x2F;s1.ax1x.com&#x2F;2020&#x2F;11&#x2F;04&#x2F;Bc">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://imgchr.com/i/BcfQzD">
<meta property="og:image" content="https://imgchr.com/i/Bc4S3T">
<meta property="og:image" content="https://imgchr.com/i/BcoiDg">
<meta property="og:image" content="https://imgchr.com/i/BcHWM6">
<meta property="og:image" content="https://imgchr.com/i/BcL7i4">
<meta property="og:image" content="https://imgchr.com/i/BcxwE6">
<meta property="og:image" content="https://imgchr.com/i/BRYDJI">
<meta property="og:image" content="https://imgchr.com/i/BRsMPU">
<meta property="og:image" content="https://imgchr.com/i/DAHCLt">
<meta property="og:image" content="https://imgchr.com/i/Decc5j">
<meta property="og:image" content="https://imgchr.com/i/DmIxud">
<meta property="article:published_time" content="2020-11-07T06:00:17.537Z">
<meta property="article:modified_time" content="2020-11-19T04:37:03.055Z">
<meta property="article:author" content="Song Wani">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://imgchr.com/i/BcfQzD">
    
    <link rel="shortcut icon" href="/blog/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/blog/img/brand.jpg)">
      <div class="brand">
        <a href="/blog/" class="avatar waves-effect waves-circle waves-light">
          <img src="/blog/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">Song Wani</h5>
          <a href="mailto:bugsong@wo.cn" title="bugsong@wo.cn" class="mail">bugsong@wo.cn</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/blog/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                Archives
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                Tags
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                Categories
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://songbug.gitee.io/blog" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">CSS技能进阶</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="Search">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">CSS技能进阶</h1>
        <h5 class="subtitle">
            
                <time datetime="2020-11-07T06:00:17.537Z" itemprop="datePublished" class="page-time">
  2020-11-07
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap post-toc-shrink" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#盒子模型详解"><span class="post-toc-number">1.</span> <span class="post-toc-text">盒子模型详解</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#了解盒子概念与基本使用"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">了解盒子概念与基本使用</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#元素居中定义与外距定义细节"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">元素居中定义与外距定义细节</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#边距合并与负值使用"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">边距合并与负值使用</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#尺寸限制与内边距的使用"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">尺寸限制与内边距的使用</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#元素边框的使用规范"><span class="post-toc-number">1.5.</span> <span class="post-toc-text">元素边框的使用规范</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#圆角控制详细使用"><span class="post-toc-number">1.6.</span> <span class="post-toc-text">圆角控制详细使用</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#轮廓线使用技巧"><span class="post-toc-number">1.7.</span> <span class="post-toc-text">轮廓线使用技巧</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#元素的多种控制模式"><span class="post-toc-number">1.8.</span> <span class="post-toc-text">元素的多种控制模式</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#使用visibility控制元素的隐藏和显示"><span class="post-toc-number">1.9.</span> <span class="post-toc-text">使用visibility控制元素的隐藏和显示</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#overflow溢出隐藏的使用"><span class="post-toc-number">1.10.</span> <span class="post-toc-text">overflow溢出隐藏的使用</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#尺寸控制的几种方式"><span class="post-toc-number">1.11.</span> <span class="post-toc-text">尺寸控制的几种方式</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#fill-available自动撑满可用空间"><span class="post-toc-number">1.12.</span> <span class="post-toc-text">fill-available自动撑满可用空间</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#fit-content根据内容自适应"><span class="post-toc-number">1.13.</span> <span class="post-toc-text">fit-content根据内容自适应</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#max-content盒子根据内容自适应"><span class="post-toc-number">1.14.</span> <span class="post-toc-text">max-content盒子根据内容自适应</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#背景与渐变"><span class="post-toc-number">2.</span> <span class="post-toc-text">背景与渐变</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#背景颜色与裁切"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">背景颜色与裁切</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#背景重复与滚动技巧"><span class="post-toc-number">2.2.</span> <span class="post-toc-text">背景重复与滚动技巧</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#背景重复与尺寸定制"><span class="post-toc-number">2.3.</span> <span class="post-toc-text">背景重复与尺寸定制</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#多图定义与组合语句"><span class="post-toc-number">2.4.</span> <span class="post-toc-text">多图定义与组合语句</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#盒子阴影的使用方法"><span class="post-toc-number">2.5.</span> <span class="post-toc-text">盒子阴影的使用方法</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#元素背景渐变色使用"><span class="post-toc-number">2.6.</span> <span class="post-toc-text">元素背景渐变色使用</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#径向渐变的使用"><span class="post-toc-number">2.7.</span> <span class="post-toc-text">径向渐变的使用</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#镜像标识位绘制小太阳"><span class="post-toc-number">2.8.</span> <span class="post-toc-text">镜像标识位绘制小太阳</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#颜色渐变中间阈值使用技巧"><span class="post-toc-number">2.9.</span> <span class="post-toc-text">颜色渐变中间阈值使用技巧</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#使用渐变重复绘制网站进度条"><span class="post-toc-number">2.10.</span> <span class="post-toc-text">使用渐变重复绘制网站进度条</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#动画章节"><span class="post-toc-number">3.</span> <span class="post-toc-text">动画章节</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#区别translation与transform"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">区别translation与transform</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#transform变形动作"><span class="post-toc-number">3.1.1.</span> <span class="post-toc-text">transform变形动作</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#变形叠加"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">变形叠加</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#伪类状态hover，target"><span class="post-toc-number">3.3.</span> <span class="post-toc-text">伪类状态hover，target</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#移动元素"><span class="post-toc-number">3.4.</span> <span class="post-toc-text">移动元素</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#动感的输入框制作"><span class="post-toc-number">3.5.</span> <span class="post-toc-text">动感的输入框制作</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#移动端的动态切换效果"><span class="post-toc-number">3.6.</span> <span class="post-toc-text">移动端的动态切换效果</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#2D缩放使用方法"><span class="post-toc-number">3.7.</span> <span class="post-toc-text">2D缩放使用方法</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Z轴缩放"><span class="post-toc-number">3.8.</span> <span class="post-toc-text">Z轴缩放</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#也可以使用scale3d（X，Y，Z）来综合设置"><span class="post-toc-number">3.9.</span> <span class="post-toc-text">也可以使用scale3d（X，Y，Z）来综合设置</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#开发缩放菜单案例"><span class="post-toc-number">3.10.</span> <span class="post-toc-text">开发缩放菜单案例</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#图集效果案例"><span class="post-toc-number">3.11.</span> <span class="post-toc-text">图集效果案例</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#按X轴旋转"><span class="post-toc-number">3.12.</span> <span class="post-toc-text">按X轴旋转</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#按YZ轴旋转"><span class="post-toc-number">3.13.</span> <span class="post-toc-text">按YZ轴旋转</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#控制3个轴的旋转，写法不一样"><span class="post-toc-number">3.14.</span> <span class="post-toc-text">控制3个轴的旋转，写法不一样</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#参数叠加与顺序的影响"><span class="post-toc-number">3.15.</span> <span class="post-toc-text">参数叠加与顺序的影响</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#元素的倾斜skewX"><span class="post-toc-number">3.16.</span> <span class="post-toc-text">元素的倾斜skewX</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#2D变形，参考点"><span class="post-toc-number">3.17.</span> <span class="post-toc-text">2D变形，参考点</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#3D变形参考点技巧"><span class="post-toc-number">3.18.</span> <span class="post-toc-text">3D变形参考点技巧</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#新年贺卡制作和时钟请看后盾人"><span class="post-toc-number">3.19.</span> <span class="post-toc-text">新年贺卡制作和时钟请看后盾人</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#perspective属性与方法"><span class="post-toc-number">3.20.</span> <span class="post-toc-text">perspective属性与方法</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#呈现三维空间。（Z轴参与）"><span class="post-toc-number">3.21.</span> <span class="post-toc-text">呈现三维空间。（Z轴参与）</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#人的视角在动，不改变盒子任何东西"><span class="post-toc-number">3.22.</span> <span class="post-toc-text">人的视角在动，不改变盒子任何东西</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#创造立方体盒子的思路"><span class="post-toc-number">3.23.</span> <span class="post-toc-text">创造立方体盒子的思路</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#翻转卡片"><span class="post-toc-number">3.24.</span> <span class="post-toc-text">翻转卡片</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#过渡transition"><span class="post-toc-number">4.</span> <span class="post-toc-text">过渡transition</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#状态过渡"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">状态过渡</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#结合js的部分transitionend"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">结合js的部分transitionend</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#transition-duration过渡时间使用技巧"><span class="post-toc-number">4.3.</span> <span class="post-toc-text">transition-duration过渡时间使用技巧</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#不同状态过渡时间控制"><span class="post-toc-number">4.4.</span> <span class="post-toc-text">不同状态过渡时间控制</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#transition-timing-function-过渡安排时间方法"><span class="post-toc-number">4.5.</span> <span class="post-toc-text">transition-timing-function&#x2F;过渡安排时间方法</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#steps，步进帧动画"><span class="post-toc-number">4.6.</span> <span class="post-toc-text">steps，步进帧动画</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#steps-1-start-step-start-steps-1-end-step-end"><span class="post-toc-number">4.7.</span> <span class="post-toc-text">steps(1,start)&#x3D;step-start,steps(1,end)&#x3D;step-end</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#延迟过渡，在过渡之前的等待时间：transition-delay"><span class="post-toc-number">4.8.</span> <span class="post-toc-text">延迟过渡，在过渡之前的等待时间：transition-delay</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#过渡效果的组合设置"><span class="post-toc-number">4.9.</span> <span class="post-toc-text">过渡效果的组合设置</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#帧动画"><span class="post-toc-number">5.</span> <span class="post-toc-text">帧动画</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#移动小方块"><span class="post-toc-number">5.1.</span> <span class="post-toc-text">移动小方块</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#同时声明关键帧规则"><span class="post-toc-number">5.2.</span> <span class="post-toc-text">同时声明关键帧规则</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#多个动画使用与时间配置"><span class="post-toc-number">5.3.</span> <span class="post-toc-text">多个动画使用与时间配置</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#动画时间"><span class="post-toc-number">5.4.</span> <span class="post-toc-text">动画时间</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#属性重叠对动画的影响"><span class="post-toc-number">5.5.</span> <span class="post-toc-text">属性重叠对动画的影响</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#animation-fill-mode，填充模式，也就是停止状态"><span class="post-toc-number">5.6.</span> <span class="post-toc-text">animation-fill-mode，填充模式，也就是停止状态</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#动画执行的次数animation-iteration-count"><span class="post-toc-number">5.7.</span> <span class="post-toc-text">动画执行的次数animation-iteration-count</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#建立在源元素的变换"><span class="post-toc-number">5.8.</span> <span class="post-toc-text">建立在源元素的变换</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#动画方向animation-direction"><span class="post-toc-number">5.9.</span> <span class="post-toc-text">动画方向animation-direction</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#弹跳小球"><span class="post-toc-number">5.10.</span> <span class="post-toc-text">弹跳小球</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#微场景动画"><span class="post-toc-number">5.11.</span> <span class="post-toc-text">微场景动画</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#贝塞尔曲线控制动画速率"><span class="post-toc-number">5.12.</span> <span class="post-toc-text">贝塞尔曲线控制动画速率</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#盒子阴影与currentColor"><span class="post-toc-number">5.13.</span> <span class="post-toc-text">盒子阴影与currentColor</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#步进动画animation-timing-function"><span class="post-toc-number">5.14.</span> <span class="post-toc-text">步进动画animation-timing-function</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#动画-播放-情形：running-paused"><span class="post-toc-number">5.15.</span> <span class="post-toc-text">动画-播放-情形：running | paused</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#动画系列的都拥有可以设置多个或者多组的属性值。"><span class="post-toc-number">5.16.</span> <span class="post-toc-text">动画系列的都拥有可以设置多个或者多组的属性值。</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#动画填充模式-animation-fill-mode"><span class="post-toc-number">5.17.</span> <span class="post-toc-text">动画填充模式 animation-fill-mode</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#综合写法-animation"><span class="post-toc-number">5.18.</span> <span class="post-toc-text">综合写法 animation</span></a></li></ol></li></ol>
        </nav>
    </aside>


<article id="post-CSS技能进阶"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">CSS技能进阶</h1>
        <div class="post-meta">
            <time class="post-time" title="2020-11-07 14:00:17" datetime="2020-11-07T06:00:17.537Z"  itemprop="datePublished">2020-11-07</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h1 id="盒子模型详解"><a href="#盒子模型详解" class="headerlink" title="盒子模型详解"></a>盒子模型详解</h1><p>整体内容整理自</p>
<p>，仅供交流学习使用。</p>
<h2 id="了解盒子概念与基本使用"><a href="#了解盒子概念与基本使用" class="headerlink" title="了解盒子概念与基本使用"></a>了解盒子概念与基本使用</h2><p>盒子模型区别于弹性盒模型，下面是盒子模型的示意图</p>
<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/BcfQzD" alt="BcfQzD.png](https://s1.ax1x.com/2020/11/04/BcfQzD.png)" title="">
                </div>
                <div class="image-caption">BcfQzD.png](https://s1.ax1x.com/2020/11/04/BcfQzD.png)</div>
            </figure></p>
<p>一个小案例，理解下margin与padding：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>1了解盒子模型<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			article &#123;</span><br><span class="line"><span class="css">				<span class="selector-tag">border</span>: <span class="selector-tag">solid</span> 2<span class="selector-tag">px</span> <span class="selector-id">#DDDDDD</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			article&gt;div &#123;</span><br><span class="line">				border: solid 3px red;</span><br><span class="line">				margin: 30px;</span><br><span class="line">				padding: 50px;</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span>&gt;</span>Bugosng<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/Bc4S3T" alt="Bc4S3T.png](https://s1.ax1x.com/2020/11/04/Bc4S3T.png)" title="">
                </div>
                <div class="image-caption">Bc4S3T.png](https://s1.ax1x.com/2020/11/04/Bc4S3T.png)</div>
            </figure></p>
<h2 id="元素居中定义与外距定义细节"><a href="#元素居中定义与外距定义细节" class="headerlink" title="元素居中定义与外距定义细节"></a>元素居中定义与外距定义细节</h2><p>上边的margin与padding写法是同时控制（上右下左）四个边距，当然也可以依次给定。两个值是先上下后左右。如果需要单独对每条边进行设置可以使用 边距-位置 的方式进行指定。</p>
<p>推荐使用简写方式，更省事。</p>
<p><strong>如果只对一侧进行设置的话，那么另一侧将会自动设置成相同的值</strong></p>
<p>超级无敌居中办法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">element_selector</span>&#123;<span class="attribute">margin</span>: <span class="number">0</span> auto;&#125;</span><br></pre></td></tr></table></figure>

<h2 id="边距合并与负值使用"><a href="#边距合并与负值使用" class="headerlink" title="边距合并与负值使用"></a>边距合并与负值使用</h2><p>margin的负值会使得盒子向外延伸，内边距无意义。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">	body&#123;</span><br><span class="line">		padding: 200px;</span><br><span class="line">	&#125;</span><br><span class="line">	article &#123;</span><br><span class="line"><span class="css">		<span class="selector-tag">border</span>: <span class="selector-tag">solid</span> 2<span class="selector-tag">px</span> <span class="selector-id">#DDDDDD</span>;</span></span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	article&gt;div &#123;</span><br><span class="line">		border: solid 3px red;</span><br><span class="line">		</span><br><span class="line">		margin-top: 30px;</span><br><span class="line">		margin-right: -30px;</span><br><span class="line">		margin-bottom: 30px;</span><br><span class="line">		margin-left: -50px;</span><br><span class="line"><span class="css">		<span class="comment">/* margin-left: -20px; */</span></span></span><br><span class="line">	&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/BcoiDg" alt="BcoiDg.png](https://s1.ax1x.com/2020/11/04/BcoiDg.png)" title="">
                </div>
                <div class="image-caption">BcoiDg.png](https://s1.ax1x.com/2020/11/04/BcoiDg.png)</div>
            </figure></p>
<p>关于边距塌陷：</p>
<h2 id="尺寸限制与内边距的使用"><a href="#尺寸限制与内边距的使用" class="headerlink" title="尺寸限制与内边距的使用"></a>尺寸限制与内边距的使用</h2><p>给到父级盒子box-sizing属性，值为border-box，可以将整个盒子限制到固定尺寸，更改边线宽度会向内延伸而不是向外。如果给padding值得话也是会向内调整。</p>
<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/BcHWM6" alt="BcHWM6.png](https://s1.ax1x.com/2020/11/04/BcHWM6.png)" title="">
                </div>
                <div class="image-caption">BcHWM6.png](https://s1.ax1x.com/2020/11/04/BcHWM6.png)</div>
            </figure></p>
<h2 id="元素边框的使用规范"><a href="#元素边框的使用规范" class="headerlink" title="元素边框的使用规范"></a>元素边框的使用规范</h2><p>border-style常用样式：</p>
<ul>
<li>none：没有边框即忽略所有边框的宽度（默认值）</li>
<li>solid：边框为单实线(最为常用的)</li>
<li>dashed：边框为虚线</li>
<li>dotted：边框为点线</li>
<li>double：边框为双实线</li>
</ul>
<p>可以统一定义，也可以单独定义，就像border-top-style，此处不再赘述。</p>
<p>另外宽度和颜色也可以使用同样的操作。</p>
<p>下面我给大家秀一个三角形：</p>
<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/BcL7i4" alt="BcL7i4.png](https://s1.ax1x.com/2020/11/04/BcL7i4.png)" title="">
                </div>
                <div class="image-caption">BcL7i4.png](https://s1.ax1x.com/2020/11/04/BcL7i4.png)</div>
            </figure></p>
<h2 id="圆角控制详细使用"><a href="#圆角控制详细使用" class="headerlink" title="圆角控制详细使用"></a>圆角控制详细使用</h2><p>从左上开始，四个角落。统一设定使用border-radius</p>
<p>另外也可以单独使用，先以上部开始，</p>
<p>border-top-left-radius：</p>
<p>border-top-right-radius：</p>
<p>。。。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			soan &#123;</span><br><span class="line">				border-bottom: 2px red solid;</span><br><span class="line">				border-radius: 50%;</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">soan</span>&gt;</span>0.0<span class="tag">&lt;/<span class="name">soan</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/BcxwE6" alt="BcxwE6.png](https://s1.ax1x.com/2020/11/04/BcxwE6.png)" title="">
                </div>
                <div class="image-caption">BcxwE6.png](https://s1.ax1x.com/2020/11/04/BcxwE6.png)</div>
            </figure></p>
<h2 id="轮廓线使用技巧"><a href="#轮廓线使用技巧" class="headerlink" title="轮廓线使用技巧"></a>轮廓线使用技巧</h2><p>outline-style 轮廓线，属性值和border差不多。</p>
<p>首先的不同点是不占用空间位置。</p>
<h2 id="元素的多种控制模式"><a href="#元素的多种控制模式" class="headerlink" title="元素的多种控制模式"></a>元素的多种控制模式</h2><p>使用display：none；让元素隐藏</p>
<p>还可以改变元素的显示模式块级元素和行内元素和行内块元素。</p>
<h2 id="使用visibility控制元素的隐藏和显示"><a href="#使用visibility控制元素的隐藏和显示" class="headerlink" title="使用visibility控制元素的隐藏和显示"></a>使用visibility控制元素的隐藏和显示</h2><p>使用场景比display少，使用display会丢失空间位置，而visibility不会舍去空间位置。可以理解为改了个透明度。。。</p>
<h2 id="overflow溢出隐藏的使用"><a href="#overflow溢出隐藏的使用" class="headerlink" title="overflow溢出隐藏的使用"></a>overflow溢出隐藏的使用</h2><p>溢出不只是文本，也可以是其他内容。</p>
<p>可以达到在有限区域装载更多内容的效果。</p>
<p>overflow常用的几个属性</p>
<p>scroll，hidden，auto，</p>
<p>展示小点点：</p>
<p>white-space：nowrap；</p>
<p>text-overflow：ellipsis；</p>
<h2 id="尺寸控制的几种方式"><a href="#尺寸控制的几种方式" class="headerlink" title="尺寸控制的几种方式"></a>尺寸控制的几种方式</h2><p>min-width，min-height，max-width，max-height</p>
<p>使用场景应该是限制图片等大小，使其合理展示。</p>
<h2 id="fill-available自动撑满可用空间"><a href="#fill-available自动撑满可用空间" class="headerlink" title="fill-available自动撑满可用空间"></a>fill-available自动撑满可用空间</h2><p>-webkit-fill-available这个作为一个属性，可以给高或者宽</p>
<h2 id="fit-content根据内容自适应"><a href="#fit-content根据内容自适应" class="headerlink" title="fit-content根据内容自适应"></a>fit-content根据内容自适应</h2><p>从字面上理解就是适应内容的意思。</p>
<p>这个属性值可以给高或者宽。</p>
<h2 id="max-content盒子根据内容自适应"><a href="#max-content盒子根据内容自适应" class="headerlink" title="max-content盒子根据内容自适应"></a>max-content盒子根据内容自适应</h2><p>这个属性值设置给父级的宽高好一点，比较极端的调整内部盒子的显示，在保证内部元素可以正常显示的情况下，采取最大宽高度。</p>
<p>另外min-content也是这个意思。</p>
<h1 id="背景与渐变"><a href="#背景与渐变" class="headerlink" title="背景与渐变"></a>背景与渐变</h1><h2 id="背景颜色与裁切"><a href="#背景颜色与裁切" class="headerlink" title="背景颜色与裁切"></a>背景颜色与裁切</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			article &#123;</span><br><span class="line"><span class="css">				<span class="selector-tag">background-color</span>: <span class="selector-tag">rgba</span>(255,0,0,0<span class="selector-class">.5</span>);</span></span><br><span class="line">				border: 10px dashed black ;</span><br><span class="line">				padding: 40px;</span><br><span class="line"><span class="css">				<span class="comment">/* background-clip: border-box;从边框线往里算 */</span></span></span><br><span class="line"><span class="css">				<span class="comment">/* background-clip: content-box;从内容开始往里算背景 */</span></span></span><br><span class="line">				background-clip: padding-box;</span><br><span class="line"><span class="css">				<span class="comment">/* 从内边距起始处，即边框线内部开始算 */</span></span></span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h2</span>&gt;</span>Bugsong<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/BRYDJI" alt="BRYDJI.png](https://s1.ax1x.com/2020/11/05/BRYDJI.png)" title="">
                </div>
                <div class="image-caption">BRYDJI.png](https://s1.ax1x.com/2020/11/05/BRYDJI.png)</div>
            </figure></p>
<h2 id="背景重复与滚动技巧"><a href="#背景重复与滚动技巧" class="headerlink" title="背景重复与滚动技巧"></a>背景重复与滚动技巧</h2><p>修改background-repeat属性值，可以实现重复效果与控制。</p>
<p>background-attachment：fixed/scroll</p>
<p>上面这个东西需要结合overflow使用，并且父级盒子大小要小于背景图片。</p>
<h2 id="背景重复与尺寸定制"><a href="#背景重复与尺寸定制" class="headerlink" title="背景重复与尺寸定制"></a>背景重复与尺寸定制</h2><p>使用background-position：调整背景图片的位置</p>
<p>也可以给负值。</p>
<p><strong>这个也可以像正常文档流中的图片，调整位置</strong></p>
<p>背景尺寸更改应该是background-size：100% 100%；</p>
<p>先宽后高，另外的属性也有cover，contain</p>
<h2 id="多图定义与组合语句"><a href="#多图定义与组合语句" class="headerlink" title="多图定义与组合语句"></a>多图定义与组合语句</h2><p>使用背景时，也可以一次定义多个。</p>
<p>background-image：url（），url（）。。。。：</p>
<p>使用逗号来叠加其他图片的路径。</p>
<p>另外其他的background-position：图1属性，图2属性。。。：</p>
<p>也可以使用这种方法来写。神奇。</p>
<p>background：red url() no-repeat center；</p>
<p>也理解一下总写方式。</p>
<h2 id="盒子阴影的使用方法"><a href="#盒子阴影的使用方法" class="headerlink" title="盒子阴影的使用方法"></a>盒子阴影的使用方法</h2><p>使用boxshadow：水平 垂直 (模糊度px) rgba(111,111,111,透明度)；</p>
<h2 id="元素背景渐变色使用"><a href="#元素背景渐变色使用" class="headerlink" title="元素背景渐变色使用"></a>元素背景渐变色使用</h2><p>background：linear-gradient（[角度可给deg，to left]，颜色1，颜色2。。）；</p>
<h2 id="径向渐变的使用"><a href="#径向渐变的使用" class="headerlink" title="径向渐变的使用"></a>径向渐变的使用</h2><p>background：radial-gradient([at 镜像点位置，可以给百分比]，red,green,yellow)</p>
<h2 id="镜像标识位绘制小太阳"><a href="#镜像标识位绘制小太阳" class="headerlink" title="镜像标识位绘制小太阳"></a>镜像标识位绘制小太阳</h2><p>background：linear-gradient（90deg,red 50%,green 50%）</p>
<p>标识位是位于父级盒子的百分比，下面给你们画个太阳。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			div &#123;</span><br><span class="line">				width: 100px;</span><br><span class="line">				height: 100px;</span><br><span class="line">				background: radial-gradient(red,yellow 30%,black 70%);</span><br><span class="line"><span class="css">				<span class="comment">/* 从圆心开始向外数，百分比是定位的标识位 */</span></span></span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/BRsMPU" alt="BRsMPU.png](https://s1.ax1x.com/2020/11/05/BRsMPU.png)" title="">
                </div>
                <div class="image-caption">BRsMPU.png](https://s1.ax1x.com/2020/11/05/BRsMPU.png)</div>
            </figure></p>
<h2 id="颜色渐变中间阈值使用技巧"><a href="#颜色渐变中间阈值使用技巧" class="headerlink" title="颜色渐变中间阈值使用技巧"></a>颜色渐变中间阈值使用技巧</h2><p>区别于上边的标识位， </p>
<p>background：linear-gradient（90deg，red，[中间阈值百分比]，green）；</p>
<h2 id="使用渐变重复绘制网站进度条"><a href="#使用渐变重复绘制网站进度条" class="headerlink" title="使用渐变重复绘制网站进度条"></a>使用渐变重复绘制网站进度条</h2><p>background: repeating-linear-gradient（角度，颜色，宽度px）；</p>
<p>不用逗号分开是开始的标识位，</p>
<p><strong>使用逗号分开是阈值</strong></p>
<h1 id="动画章节"><a href="#动画章节" class="headerlink" title="动画章节"></a>动画章节</h1><h2 id="区别translation与transform"><a href="#区别translation与transform" class="headerlink" title="区别translation与transform"></a>区别translation与transform</h2><p>translation是过渡</p>
<p>transform是变形，拥有一系列的变形动作，缩放，位移什么什么的，translate是个动词，可跟像素和百分比，先横轴后纵轴。</p>
<p>translate[3d]（X,Y,[Z]），使用百分比的话，是相对于动画元素本身的位移量。</p>
<h3 id="transform变形动作"><a href="#transform变形动作" class="headerlink" title="transform变形动作"></a>transform变形动作</h3><p>none</p>
<p>translate(x,y)，一系列的东西，translateX()，translate3d(x,y,z)</p>
<p>scale(x,y)，一系列的东西，scaleZ()，scale3d(x,y,z)</p>
<p>rotate(deg)，一系列的东西，rotate3d(x,y,z,deg)，rotateZ(deg)</p>
<p>skew(<em>x-deg</em>,<em>y-deg</em>)，定义沿着X轴和Y轴的倾斜转换，skewY(deg)</p>
<p>perspective(n)，为3D转换元素定义透视视图。</p>
<h2 id="变形叠加"><a href="#变形叠加" class="headerlink" title="变形叠加"></a>变形叠加</h2><p>伪类的变化是建立在<strong>原本的元素位置</strong>的基础上的，而不是从元素偏移后开始调整。</p>
<p>行级元素不产生变形效果，将其转为行内或者行内块以及弹性元素时可以产生变化效果。</p>
<h2 id="伪类状态hover，target"><a href="#伪类状态hover，target" class="headerlink" title="伪类状态hover，target"></a>伪类状态hover，target</h2><p>这里没什么好说的，单纯的是为了交互效果。</p>
<h2 id="移动元素"><a href="#移动元素" class="headerlink" title="移动元素"></a>移动元素</h2><ul>
<li>沿X轴移动时正值向右移动、负值向左移动</li>
<li>沿Y轴移动时正值向下移动、负值向上移动</li>
<li>如果使用百分数将控制元素的原尺寸计算百分比然后移动</li>
<li>可同时设置多个值，解析器会从左向右依次执行</li>
<li><strong><u>变形是在原基础上更改，即第二次设置值时不是在第一次值上变化</u></strong></li>
</ul>
<h2 id="动感的输入框制作"><a href="#动感的输入框制作" class="headerlink" title="动感的输入框制作"></a>动感的输入框制作</h2><p>给大家制作了一个输入框：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			* &#123;</span><br><span class="line">				margin: 0;</span><br><span class="line">				padding: 0;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.field</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="selector-tag">background</span>: <span class="selector-id">#2C3E50</span>;</span></span><br><span class="line">				margin: 50px auto;</span><br><span class="line">				outline: 2px solid red;</span><br><span class="line">				height: 300px;</span><br><span class="line">				width: 300px;</span><br><span class="line">				display: flex;</span><br><span class="line">				justify-content: center;</span><br><span class="line">				align-items: center;</span><br><span class="line">				flex-direction: column;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">'text'</span>]</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="comment">/* 边框和外边线都消失 */</span></span></span><br><span class="line">				outline: none;</span><br><span class="line">				border: none;</span><br><span class="line">				width: 100%;</span><br><span class="line">				border-radius: 0;</span><br><span class="line"><span class="css">				<span class="comment">/* 由内容向外生长10px */</span></span></span><br><span class="line">				padding: 10px;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.field</span>&gt;<span class="selector-tag">div</span> &#123;</span></span><br><span class="line">				width: 200px;</span><br><span class="line">				position: relative;</span><br><span class="line"><span class="css">				<span class="comment">/* 给这个盒子加上溢出隐藏，因为伪对象也算子元素 */</span></span></span><br><span class="line">				overflow: hidden;</span><br><span class="line"><span class="css">				<span class="comment">/* 将两个输入框上下隔开，方便显示美化条 */</span></span></span><br><span class="line">				margin-top: 20px;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.field</span>&gt;<span class="selector-tag">div</span><span class="selector-pseudo">::before</span> &#123;</span></span><br><span class="line">				position: absolute;</span><br><span class="line">				left: 0;</span><br><span class="line">				bottom: 0;</span><br><span class="line">				content: '';</span><br><span class="line">				width: 100%;</span><br><span class="line"><span class="css">				<span class="comment">/* 取父级的100% */</span></span></span><br><span class="line">				height: 2px;</span><br><span class="line">				background: linear-gradient(to right, white, red, yellow, blue, white);</span><br><span class="line">				transform: translateX(-100%);</span><br><span class="line"><span class="css">				<span class="comment">/* 为下面的动画效果添加过渡,谁需要过渡就加给谁，不是父级 */</span></span></span><br><span class="line">				transition: 2s;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-class">.field</span>&gt;<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::before</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="comment">/* 理解一下这个选择器，放上去的时候改变伪类的样式 */</span></span></span><br><span class="line">				transform: translateX(100%);</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"field"</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"请输入账号"</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">placeholder</span>=<span class="string">"请输入密码"</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="移动端的动态切换效果"><a href="#移动端的动态切换效果" class="headerlink" title="移动端的动态切换效果"></a>移动端的动态切换效果</h2><p>这个就比较高端了，根据我的知识点欠缺，我觉得还是补充一下伸缩盒布局知识点，背景设置知识点，请在详细观看一下渐变。</p>
<p><strong>这里的transform是变形的意思，而冒号后面写的是变形的方法！</strong></p>
<p><strong>transition是过渡的意思，是这个动画进行的流程控制，里面也有他自己的方法！</strong></p>
<p>这两点要区分明确！</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">100vw</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">100vh</span>;</span><br><span class="line">	<span class="attribute">display</span>: flex;</span><br><span class="line">	<span class="attribute">flex-direction</span>: column;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">	<span class="attribute">content</span>: <span class="string">'王义松'</span>;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">5em</span>;</span><br><span class="line">	<span class="attribute">color</span>: gray;</span><br><span class="line">	<span class="attribute">opacity</span>: .<span class="number">5</span>;</span><br><span class="line">	<span class="comment">/* 请将以下打包记忆 */</span></span><br><span class="line">	<span class="attribute">position</span>: absolute;</span><br><span class="line">	<span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">	<span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">main</span> &#123;</span><br><span class="line">	<span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">	<span class="comment">/* 这是伸缩盒的伸缩综合写法，有必要再去补充下知识点 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">nav</span> &#123;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">8vh</span>;</span><br><span class="line">	<span class="attribute">background-color</span>: purple;</span><br><span class="line">	<span class="attribute">display</span>: flex;</span><br><span class="line">	<span class="attribute">justify-content</span>: space-around;</span><br><span class="line">	<span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">nav</span>&gt;<span class="selector-tag">a</span> &#123;</span><br><span class="line">	<span class="attribute">text-decoration</span>: none;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">2em</span>;</span><br><span class="line">	<span class="attribute">color</span>: white;</span><br><span class="line">	<span class="attribute">opacity</span>: .<span class="number">8</span>;</span><br><span class="line">	<span class="attribute">text-transform</span>: uppercase;</span><br><span class="line"></span><br><span class="line">	<span class="comment">/* 给a一个弹性，并让文本居中 */</span></span><br><span class="line">	<span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">	<span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">nav</span>&gt;<span class="selector-tag">a</span><span class="selector-pseudo">:nth-child(2)</span> &#123;</span><br><span class="line">	<span class="comment">/* 这两个边线太帅了 */</span></span><br><span class="line">	<span class="attribute">border-left</span>: <span class="number">1px</span> solid white;</span><br><span class="line">	<span class="attribute">border-right</span>: <span class="number">1px</span> solid white;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 下面给这些div加样式 */</span></span><br><span class="line"><span class="selector-tag">main</span> &#123;</span><br><span class="line">	<span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">main</span>&gt;<span class="selector-tag">div</span> &#123;</span><br><span class="line">	<span class="attribute">position</span>: absolute;</span><br><span class="line">	<span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"></span><br><span class="line">	<span class="attribute">display</span>: flex;</span><br><span class="line">	<span class="attribute">align-items</span>: center;</span><br><span class="line">	<span class="attribute">justify-content</span>: center;</span><br><span class="line"></span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">10em</span>;</span><br><span class="line">	<span class="attribute">color</span>: white;</span><br><span class="line">	<span class="comment">/* 防止字体盖住，修改z-index，貌似起到了将那串文字作为背景的效果 */</span></span><br><span class="line">	<span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100%</span>);</span><br><span class="line">	<span class="attribute">transition</span>: <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">main</span>&gt;<span class="selector-tag">div</span><span class="selector-pseudo">:nth-of-type(1)</span><span class="selector-pseudo">:target</span> &#123;</span><br><span class="line">	<span class="comment">/* 	</span></span><br><span class="line"><span class="comment">				这个选择器与:nth-child()的区别是：child是数第几个孩子，无论男女</span></span><br><span class="line"><span class="comment">				而type是数第几个男孩女孩的意思，无论第几个</span></span><br><span class="line"><span class="comment">				这里的意思就是从上到下，第一个为div的元素</span></span><br><span class="line"><span class="comment">				 */</span></span><br><span class="line">	<span class="attribute">background</span>: orange;</span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">main</span>&gt;<span class="selector-tag">div</span><span class="selector-pseudo">:nth-of-type(2)</span><span class="selector-pseudo">:target</span> &#123;</span><br><span class="line">	<span class="comment">/* 建议学习一下background的综合设置 */</span></span><br><span class="line">	<span class="attribute">background-color</span>: blue;</span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">main</span>&gt;<span class="selector-tag">div</span><span class="selector-pseudo">:nth-of-type(3)</span><span class="selector-pseudo">:target</span> &#123;</span><br><span class="line">	<span class="attribute">background-color</span>: red;</span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"./mobiletransform.css"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"home"</span>&gt;</span></span><br><span class="line">				王</span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"news"</span>&gt;</span></span><br><span class="line">				义</span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"faq"</span>&gt;</span></span><br><span class="line">				松</span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">nav</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#home"</span>&gt;</span>home<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#news"</span>&gt;</span>news<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#faq"</span>&gt;</span>faq<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="2D缩放使用方法"><a href="#2D缩放使用方法" class="headerlink" title="2D缩放使用方法"></a>2D缩放使用方法</h2><p>类比位移变换来学习，scale同样有两个参数（X轴，Y轴），scaleX（数值）</p>
<p>可以单独缩放一个轴，也可以写在一起来设置。</p>
<h2 id="Z轴缩放"><a href="#Z轴缩放" class="headerlink" title="Z轴缩放"></a>Z轴缩放</h2><p>牵扯到Z轴需要透视和旋转。我来给大家写一个简单的z轴缩放</p>
<h2 id="也可以使用scale3d（X，Y，Z）来综合设置"><a href="#也可以使用scale3d（X，Y，Z）来综合设置" class="headerlink" title="也可以使用scale3d（X，Y，Z）来综合设置"></a>也可以使用scale3d（X，Y，Z）来综合设置</h2><p>直接理解</p>
<h2 id="开发缩放菜单案例"><a href="#开发缩放菜单案例" class="headerlink" title="开发缩放菜单案例"></a>开发缩放菜单案例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">strong</span>&gt;</span>De<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Bug<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Song<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">strong</span>&gt;</span>Ko<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Dage<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Koto<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">main</span> &#123;</span><br><span class="line">	<span class="attribute">position</span>: absolute;</span><br><span class="line">	<span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">	<span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">main</span>&gt;<span class="selector-tag">ul</span> &#123;</span><br><span class="line">	<span class="attribute">display</span>: flex;</span><br><span class="line">	<span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span>&gt;<span class="selector-tag">li</span>&gt;<span class="selector-tag">strong</span> &#123;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">30px</span>;</span><br><span class="line">	<span class="attribute">background-color</span>: <span class="number">#27ae60</span>;</span><br><span class="line">	<span class="attribute">text-transform</span>: uppercase;</span><br><span class="line">	<span class="attribute">color</span>: white;</span><br><span class="line">	<span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span>&gt;<span class="selector-tag">li</span>&gt;<span class="selector-tag">strong</span>+<span class="selector-tag">div</span> &#123;</span><br><span class="line">	<span class="comment">/* 相邻选择器 */</span></span><br><span class="line">	<span class="attribute">display</span>: flex;</span><br><span class="line">	<span class="attribute">flex-direction</span>: column;</span><br><span class="line">	<span class="attribute">background-color</span>: <span class="number">#00FFFF</span>;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"></span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>);</span><br><span class="line">	<span class="attribute">transform-origin</span>: top left;</span><br><span class="line">	<span class="comment">/* 改变缩放基点 */</span></span><br><span class="line">	<span class="attribute">transition</span>: <span class="number">1s</span>;</span><br><span class="line">	<span class="attribute">position</span>: relative;</span><br><span class="line">	<span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span>&gt;<span class="selector-tag">li</span>&gt;<span class="selector-tag">strong</span>+<span class="selector-tag">div</span>&gt;<span class="selector-tag">a</span> &#123;</span><br><span class="line">	<span class="attribute">color</span>: white;</span><br><span class="line">	<span class="attribute">text-decoration</span>: none;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span>&gt;<span class="selector-tag">li</span> &#123;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span>&gt;<span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">strong</span>+<span class="selector-tag">div</span> &#123;</span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="图集效果案例"><a href="#图集效果案例" class="headerlink" title="图集效果案例"></a>图集效果案例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"../img/251.jpg"</span> <span class="attr">alt</span>=<span class="string">"pic"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"../img/204.jpg"</span> <span class="attr">alt</span>=<span class="string">"pic"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"../img/269.jpg"</span> <span class="attr">alt</span>=<span class="string">"pic"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">100vh</span>;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">100vw</span>;</span><br><span class="line"></span><br><span class="line">	<span class="attribute">display</span>: flex;</span><br><span class="line">	<span class="attribute">justify-content</span>: space-around;</span><br><span class="line">	<span class="attribute">align-items</span>: center;</span><br><span class="line">	<span class="attribute">flex-direction</span>: column;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">section</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">90%</span>;</span><br><span class="line">	<span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">10px</span>);</span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">scale</span>(.<span class="number">8</span>);</span><br><span class="line">	<span class="attribute">transition</span>: <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">	<span class="attribute">height</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">section</span><span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">	<span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">	<span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="按X轴旋转"><a href="#按X轴旋转" class="headerlink" title="按X轴旋转"></a>按X轴旋转</h2><p>rotateX（），里面可以写deg单位</p>
<h2 id="按YZ轴旋转"><a href="#按YZ轴旋转" class="headerlink" title="按YZ轴旋转"></a>按YZ轴旋转</h2><p>Y轴就是纵轴，Z轴就是纵深轴。</p>
<p>纵深轴旋转的效果就是在平面上转圈圈。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>透视<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">			* &#123;</span><br><span class="line">				padding: 0;</span><br><span class="line">				margin: 0;</span><br><span class="line">				box-sizing: border-box;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			main &#123;</span><br><span class="line">				position: absolute;</span><br><span class="line">				left: 50%;</span><br><span class="line">				top: 50%;</span><br><span class="line">				margin-left: -200px;</span><br><span class="line">				margin-top: -200px;</span><br><span class="line">				width: 400px;</span><br><span class="line">				height: 400px;</span><br><span class="line">				border: solid 5px silver;</span><br><span class="line">				transform-style: preserve-3d;</span><br><span class="line">				transform: perspective(900px) rotateX(-45deg);</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			section &#123;</span><br><span class="line">				position: absolute;</span><br><span class="line">				left: 50%;</span><br><span class="line">				top: 50%;</span><br><span class="line">				margin-left: -100px;</span><br><span class="line">				margin-top: -100px;</span><br><span class="line">				width: 200px;</span><br><span class="line">				height: 200px;</span><br><span class="line">				transition: 1s;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-tag">section</span><span class="selector-pseudo">:nth-child(1)</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="selector-tag">background</span>: <span class="selector-id">#2ecc71</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-tag">main</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">section</span><span class="selector-pseudo">:nth-child(1)</span> &#123;</span></span><br><span class="line">				transform: perspective(900px) rotateX(90deg) rotateY(25deg) rotateZ(45deg);</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">section</span>&gt;</span><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="控制3个轴的旋转，写法不一样"><a href="#控制3个轴的旋转，写法不一样" class="headerlink" title="控制3个轴的旋转，写法不一样"></a>控制3个轴的旋转，写法不一样</h2><p>前三个变量是向量倍数，第四个变量是度数。</p>
<p>向量值控制旋转轴。然后定义旋转角度。</p>
<h2 id="参数叠加与顺序的影响"><a href="#参数叠加与顺序的影响" class="headerlink" title="参数叠加与顺序的影响"></a>参数叠加与顺序的影响</h2><p>这么理解：同一元素的transform属性是全局统一的，不会发生状态叠加；就像给盒子加了旋转，在另一个伪类状态下添加了缩放，那么这个盒子并不会在旋转的时候缩放，要么缩放，要么旋转。</p>
<p>同名的属性（缩放、变换什么的），他们的值不会叠加，而会覆盖。</p>
<p>在同一条transform语句中，旋转存在先后顺序，先旋转后旋转结果不同。其他类推</p>
<h2 id="元素的倾斜skewX"><a href="#元素的倾斜skewX" class="headerlink" title="元素的倾斜skewX"></a>元素的倾斜skewX</h2><p>skewY，这就是倾斜，</p>
<p>XY轴都行，当然也可以直接写skew（）来指定XY轴的倾斜角度。</p>
<h2 id="2D变形，参考点"><a href="#2D变形，参考点" class="headerlink" title="2D变形，参考点"></a>2D变形，参考点</h2><p>transform—origin：左到右 上到下；</p>
<p>可用百分比，可用方位名词。</p>
<h2 id="3D变形参考点技巧"><a href="#3D变形参考点技巧" class="headerlink" title="3D变形参考点技巧"></a>3D变形参考点技巧</h2><p>Z轴的话，理解深度轴的参与。</p>
<h2 id="新年贺卡制作和时钟请看后盾人"><a href="#新年贺卡制作和时钟请看后盾人" class="headerlink" title="新年贺卡制作和时钟请看后盾人"></a>新年贺卡制作和时钟请看后盾人</h2><p>这里不演示了，还要加紧学后面的内容，</p>
<p>使用伪类标签时候，注意层级会影响一些伪类的效果。</p>
<h2 id="perspective属性与方法"><a href="#perspective属性与方法" class="headerlink" title="perspective属性与方法"></a>perspective属性与方法</h2><p>perspective：300px；</p>
<p>表示的是你在什么位置去看空间里的物体，好比把你的头嵌在页面里，只能看见前面的东西，看不见后面的东西。当然也会像cf上面的喷涂一样，一大片的那种。</p>
<p>默认情况下，<em>消失点</em>位于元素的中心，但是可以通过设置 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective-origin" target="_blank" rel="noopener"><code>perspective-origin</code></a> 属性来改变其位置。</p>
<p>你可以尝试改到第一面，然后稍微一动应该就看不到这个第一面了。</p>
<p>下面粘贴我的理解</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* perspective规则，指定距离页面z=0的透视距离 */</span></span><br><span class="line"><span class="selector-tag">main</span> &#123;</span><br><span class="line">	<span class="attribute">position</span>: relative;</span><br><span class="line">	<span class="attribute">top</span>: <span class="number">500px</span>;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">250px</span>;</span><br><span class="line">	<span class="attribute">border</span>: <span class="number">#34495E</span> <span class="number">5px</span> solid;</span><br><span class="line">	<span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">50</span>, <span class="number">50</span>, <span class="number">50</span>, <span class="number">0.6</span>);</span><br><span class="line"></span><br><span class="line">	<span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span><br><span class="line">	<span class="comment">/* 这个东西需要这个属性的时候 再给 */</span></span><br><span class="line">	<span class="comment">/* 这个属性在给了景深方法之后,</span></span><br><span class="line"><span class="comment">	可以让元素呈现3D效果，</span></span><br><span class="line"><span class="comment">	可以把内部符合3D绘制的东西绘制出来</span></span><br><span class="line"><span class="comment">	不给的话就是一个平面</span></span><br><span class="line"><span class="comment">	*/</span></span><br><span class="line"></span><br><span class="line">	<span class="attribute">transform</span>:<span class="built_in">rotateX</span>(-<span class="number">45deg</span>);</span><br><span class="line">	<span class="comment">/* 这个perspective给到了方法,他自身发生了透视 */</span></span><br><span class="line"></span><br><span class="line">	<span class="attribute">perspective</span>: <span class="number">900px</span>;</span><br><span class="line">	<span class="comment">/* 方法的景深是视距，规则的景深是物体透视 */</span></span><br><span class="line">	<span class="comment">/* </span></span><br><span class="line"><span class="comment">	给了这个景深属性，由此看，此规则应给到父级</span></span><br><span class="line"><span class="comment">	可以看到里面的旋转，</span></span><br><span class="line"><span class="comment">	但是出现的面不一样，</span></span><br><span class="line"><span class="comment">	就像在大马路上看两边停着的汽车，</span></span><br><span class="line"><span class="comment">	能看到每一个车的部分都不一样，</span></span><br><span class="line"><span class="comment">	给了大概就是把整个马路端起来看，</span></span><br><span class="line"><span class="comment">	看到每个车的地方都不一样</span></span><br><span class="line"><span class="comment">	</span></span><br><span class="line"><span class="comment">	不给的话就是你看每一辆车的视角都是一样的，</span></span><br><span class="line"><span class="comment">	就好比都从右后方看，看不到左前方</span></span><br><span class="line"><span class="comment">	*/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">section</span> &#123;</span><br><span class="line">	<span class="attribute">position</span>: absolute;</span><br><span class="line">	<span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">background-color</span>: green;</span><br><span class="line">	<span class="attribute">transform-origin</span>: left;</span><br><span class="line">	<span class="attribute">transform</span>:<span class="built_in">rotateY</span>(<span class="number">45deg</span>);</span><br><span class="line">	<span class="comment">/* 这样写它会直接以中心为基准点开始旋转 */</span></span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">	<span class="comment">/* 这里的方法perspective是你的眼球到车的距离</span></span><br><span class="line"><span class="comment">	 要注意你是看不到眼睛后面的东西的</span></span><br><span class="line"><span class="comment">	 */</span></span><br><span class="line"></span><br><span class="line">	<span class="attribute">transform-origin</span>: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">	<span class="comment">/* 这样写会以左上角为原点，但是只旋转Y轴，第二个值并不会影响 */</span></span><br><span class="line">	<span class="attribute">z-index</span>: <span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">section</span><span class="selector-pseudo">:nth-of-type(2)</span> &#123;</span><br><span class="line">	<span class="attribute">left</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="呈现三维空间。（Z轴参与）"><a href="#呈现三维空间。（Z轴参与）" class="headerlink" title="呈现三维空间。（Z轴参与）"></a>呈现三维空间。（Z轴参与）</h2><p>transform-style：preserve-3d；</p>
<p>这个用于父元素，决定的是子元素的显示方式。默认flat，2d平面内显示。</p>
<h2 id="人的视角在动，不改变盒子任何东西"><a href="#人的视角在动，不改变盒子任何东西" class="headerlink" title="人的视角在动，不改变盒子任何东西"></a>人的视角在动，不改变盒子任何东西</h2><p>只改变我们自己的位置。</p>
<p>perspective-origin：水平 数值；</p>
<p>好比大树不动，我们绕着大树转圈看大树。</p>
<h2 id="创造立方体盒子的思路"><a href="#创造立方体盒子的思路" class="headerlink" title="创造立方体盒子的思路"></a>创造立方体盒子的思路</h2><p>现在平面中建立4个方块儿，绝对定位使他们重合，旋转中心建立在方块中心，且向Z轴二分之一块的边长。分别旋转得出前后左右四个面。然后再创造盖和底。</p>
<h2 id="翻转卡片"><a href="#翻转卡片" class="headerlink" title="翻转卡片"></a>翻转卡片</h2><p>首先的设计思路，应用backface-visibility：hidden。这样的话反面就没有了。</p>
<p>正面旋转0，触碰的时候，旋转-180；</p>
<p>反面先转180，触碰时恢复为0</p>
<p>当翻转应用到了父元素时，需要3D效果；子元素时需要景深效果。</p>
<p>不要多虑3d效果，有一些在2d视角看了，就是加了过渡。</p>
<p>这里有一个深刻的理解，在容器内设置了不同角度的内容，相当于这个容器是一个3d的物体，需要绘制出Z轴的内容，给这个容器本身加上3d（transform-style:preserve-3d），会影响到子级元素的展示效果。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>翻转卡片<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			* &#123;</span><br><span class="line">				margin: 0;</span><br><span class="line">				padding: 0;</span><br><span class="line">				box-sizing: border-box;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			main &#123;</span><br><span class="line">				width: 500px;</span><br><span class="line">				height: 500px;</span><br><span class="line">				margin: 0 auto;</span><br><span class="line"><span class="css">				<span class="selector-tag">border</span>: <span class="selector-id">#34495E</span> 2<span class="selector-tag">px</span> <span class="selector-tag">solid</span>;</span></span><br><span class="line">				display: flex;</span><br><span class="line">				justify-content: center;</span><br><span class="line">				align-items: center;</span><br><span class="line"></span><br><span class="line">				perspective: 900px;</span><br><span class="line">				/* 这个透视的效果就是我们的视距</span><br><span class="line">				 到整个盒子容器的距离，</span><br><span class="line">				 会影响到盒子内部的所有内容</span><br><span class="line">				 那个transform里面的perspective</span><br><span class="line">				 应该是作用在容器本身的视距，写在这里不会有效果</span><br><span class="line">				 */</span><br><span class="line">				</span><br><span class="line">				transform: perspective(0px);</span><br><span class="line"><span class="css">				<span class="comment">/* 此语句在此处并无用处 */</span></span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			section &#123;</span><br><span class="line">				position: absolute;</span><br><span class="line">				width: 300px;</span><br><span class="line">				height: 300px;</span><br><span class="line"></span><br><span class="line">				display: flex;</span><br><span class="line">				justify-content: center;</span><br><span class="line">				align-items: center;</span><br><span class="line"></span><br><span class="line">				font-size: 5em;</span><br><span class="line">				color: white;</span><br><span class="line"></span><br><span class="line">				transition: 1s;</span><br><span class="line"><span class="css">				<span class="comment">/* 这个产生了2d平面内的旋转过渡 */</span></span></span><br><span class="line"></span><br><span class="line">				backface-visibility: hidden;</span><br><span class="line"><span class="css">				<span class="comment">/* 是不是背面，浏览器和我们的理解一样 */</span></span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-tag">section</span><span class="selector-pseudo">:nth-child(1)</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="selector-tag">background-color</span>: <span class="selector-id">#E74C3C</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-tag">section</span><span class="selector-pseudo">:nth-child(2)</span> &#123;</span></span><br><span class="line">				background-color: orange;</span><br><span class="line">				transform: rotateY(-180deg);</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-tag">main</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">section</span><span class="selector-pseudo">:nth-child(1)</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="comment">/* 务必要选中 */</span></span></span><br><span class="line">				transform: rotateY(180deg);</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="selector-tag">main</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">section</span><span class="selector-pseudo">:nth-child(2)</span> &#123;</span></span><br><span class="line"><span class="css">				<span class="comment">/* 务必要选中 */</span></span></span><br><span class="line">				transform: rotateY(0deg);</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">section</span>&gt;</span>1<span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">section</span>&gt;</span>2<span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="过渡transition"><a href="#过渡transition" class="headerlink" title="过渡transition"></a>过渡transition</h1><p>一般有中间值的属性就可以设置过渡。</p>
<p>实线与点线没有过渡。尺寸与颜色可以过渡。</p>
<h2 id="状态过渡"><a href="#状态过渡" class="headerlink" title="状态过渡"></a>状态过渡</h2><p>在原状态定义的样式，在伪类样式里会被继承-》过渡时间也会继承。</p>
<p>那么就可以修改，单独为出现定义时间，触发时与返回时时间不一样。</p>
<p>定义在原状态的时间是返回时间，如果不给伪类状态下的过渡时间，那么它也是触发时间（继承）。</p>
<p>也就是说两个状态可以分别定义过渡效果。</p>
<p>transition-property：参与过度的属性。默认是all</p>
<p>transition-duration：持续时间。</p>
<h2 id="结合js的部分transitionend"><a href="#结合js的部分transitionend" class="headerlink" title="结合js的部分transitionend"></a>结合js的部分transitionend</h2><p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/DAHCLt" alt="DAHCLt.png](https://s3.ax1x.com/2020/11/16/DAHCLt.png)" title="">
                </div>
                <div class="image-caption">DAHCLt.png](https://s3.ax1x.com/2020/11/16/DAHCLt.png)</div>
            </figure></p>
<p>这个表示监听到动画结束的行为，执行下面的function</p>
<h2 id="transition-duration过渡时间使用技巧"><a href="#transition-duration过渡时间使用技巧" class="headerlink" title="transition-duration过渡时间使用技巧"></a>transition-duration过渡时间使用技巧</h2><p>这个可以结合transition-property使用，transition-duration如果给了一个时间，那么就是transition-property所有属性值的过渡时间，如果给了两个，那么奇偶数对应分配；如果给了三个的话，会一次循环给transition-property的属性分配transition-duration给的时间。</p>
<h2 id="不同状态过渡时间控制"><a href="#不同状态过渡时间控制" class="headerlink" title="不同状态过渡时间控制"></a>不同状态过渡时间控制</h2><p>在非伪类状态下，给的过渡时间是初始和最终两个态相互转换各自用的时间；</p>
<p>在伪类状态下给的过渡属性和过渡时间，实在伪类触发时所同步进行的动画；</p>
<p>这个意思就是要求起始和最终效果的特殊性要求如何实现。</p>
<p>transition-property结合transition-duration</p>
<h2 id="transition-timing-function-过渡安排时间方法"><a href="#transition-timing-function-过渡安排时间方法" class="headerlink" title="transition-timing-function/过渡安排时间方法"></a>transition-timing-function/过渡安排时间方法</h2><p>默认ease（快到慢）、线性linear（均衡）、ease-in（慢入）、ease-out（缓出）、ease-in-out（缓入缓出）</p>
<h2 id="steps，步进帧动画"><a href="#steps，步进帧动画" class="headerlink" title="steps，步进帧动画"></a>steps，步进帧动画</h2><p>步进过渡，作为transition-timing-function的属性值，写法是</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">transition-timing-function: steps(3, start); //步数，位态</span><br><span class="line">//步数就是帧数，持续时间给了个秒数，表示在这个总秒数的时间内一共有多少帧。</span><br></pre></td></tr></table></figure>

<h2 id="steps-1-start-step-start-steps-1-end-step-end"><a href="#steps-1-start-step-start-steps-1-end-step-end" class="headerlink" title="steps(1,start)=step-start,steps(1,end)=step-end"></a>steps(1,start)=step-start,steps(1,end)=step-end</h2><p>开始就是计时器开始的时候执行，结束也是一个意思。</p>
<h2 id="延迟过渡，在过渡之前的等待时间：transition-delay"><a href="#延迟过渡，在过渡之前的等待时间：transition-delay" class="headerlink" title="延迟过渡，在过渡之前的等待时间：transition-delay"></a>延迟过渡，在过渡之前的等待时间：transition-delay</h2><p>这个也可以奇偶对应，像设置持续时间一样来调整动画等待时长。</p>
<p><strong>主要用来调整各个动画属性的先后顺序。</strong></p>
<h2 id="过渡效果的组合设置"><a href="#过渡效果的组合设置" class="headerlink" title="过渡效果的组合设置"></a>过渡效果的组合设置</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">transition：参与动画的属性 线性 持续 延迟，参与动画的属性 线性 持续 延迟，参与动画的属性 线性 持续 延迟。。。。。。</span><br></pre></td></tr></table></figure>

<p>性能线性持续延迟，property.linear.duration.delay。</p>
<h1 id="帧动画"><a href="#帧动画" class="headerlink" title="帧动画"></a>帧动画</h1><p>定义帧动画</p>
<p>@keyframes 动画名称{动画内容，这里可以用百分比，可以用from to；如果百分比未给起始的话(给100%)，会以元素的初始状态为起始；未给终点的话(给0%)，起始状态是终点}</p>
<p>通过animation-name调用动画</p>
<h2 id="移动小方块"><a href="#移动小方块" class="headerlink" title="移动小方块"></a>移动小方块</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>移动小方块儿<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			* &#123;</span><br><span class="line">				margin: 0;</span><br><span class="line">				padding: 0;</span><br><span class="line">				box-sizing: border-box;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			main &#123;</span><br><span class="line">				width: 400px;</span><br><span class="line">				height: 400px;</span><br><span class="line"><span class="css">				<span class="selector-tag">background-color</span>: <span class="selector-id">#000000</span>;</span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			section &#123;</span><br><span class="line">				width: 100px;</span><br><span class="line">				height: 100px;</span><br><span class="line">				background-color: white;</span><br><span class="line">				animation-name: dh;</span><br><span class="line">				animation-duration: 4s;</span><br><span class="line"><span class="css">				<span class="comment">/* animation-iteration-count: infinite; */</span></span></span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="keyword">@keyframes</span> dh &#123;</span></span><br><span class="line">				25% &#123;</span><br><span class="line">					transform: translateX(300px);</span><br><span class="line">				&#125;</span><br><span class="line"></span><br><span class="line">				50% &#123;</span><br><span class="line">					transform: translate(300px, 300px);</span><br><span class="line"><span class="css">					<span class="comment">/* 这里并不会继承上面的移动，所以需要携带着写一遍 */</span></span></span><br><span class="line">				&#125;</span><br><span class="line"></span><br><span class="line">				75% &#123;</span><br><span class="line">					transform: translate(0, 300px);</span><br><span class="line"><span class="css">					<span class="comment">/* 这里并不会继承上面的移动，所以需要携带着写一遍 */</span></span></span><br><span class="line">				&#125;</span><br><span class="line">               	25%,</span><br><span class="line">				75% &#123;</span><br><span class="line">					border-radius: 50%;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">section</span>&gt;</span><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="同时声明关键帧规则"><a href="#同时声明关键帧规则" class="headerlink" title="同时声明关键帧规则"></a>同时声明关键帧规则</h2><p>类似代码复用，把某些进度内的相同样式写到并集规则里面。</p>
<h2 id="多个动画使用与时间配置"><a href="#多个动画使用与时间配置" class="headerlink" title="多个动画使用与时间配置"></a>多个动画使用与时间配置</h2><p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/Decc5j" alt="Decc5j.png](https://s3.ax1x.com/2020/11/18/Decc5j.png)" title="">
                </div>
                <div class="image-caption">Decc5j.png](https://s3.ax1x.com/2020/11/18/Decc5j.png)</div>
            </figure></p>
<p>一个标签动画可以给多个，也可以像变形持续时间和延迟时间一样进行时间管理。</p>
<h2 id="动画时间"><a href="#动画时间" class="headerlink" title="动画时间"></a>动画时间</h2><p>使用 <code>animation-duration</code> 可以声明动画播放的时间，即把所有帧执行一遍所需要的时间。</p>
<ul>
<li>可以使用m秒，ms毫秒时间单位</li>
<li>可为不同动画单独设置执行时间</li>
<li>如果动画数量大于时间数量，将重新从时间列表中计算</li>
</ul>
<h2 id="属性重叠对动画的影响"><a href="#属性重叠对动画的影响" class="headerlink" title="属性重叠对动画的影响"></a>属性重叠对动画的影响</h2><p>每个动画单独的持续时间也会单独的影响到整体的动画。</p>
<p>不同的动画里，设置了相同的属性重叠，会以后出现的动画内的属性值为准。而且受持续时间影响（动画进度）。</p>
<h2 id="animation-fill-mode，填充模式，也就是停止状态"><a href="#animation-fill-mode，填充模式，也就是停止状态" class="headerlink" title="animation-fill-mode，填充模式，也就是停止状态"></a>animation-fill-mode，填充模式，也就是停止状态</h2><ul>
<li><p><strong>none：</strong> </p>
<p>默认值。不设置对象动画之外的状态 </p>
</li>
<li><p><strong>forwards：</strong> </p>
<p>设置对象状态为动画结束时的状态 </p>
</li>
<li><p><strong>backwards：</strong> </p>
<p>设置对象状态为动画开始时的状态 </p>
</li>
<li><p><strong>both：</strong> </p>
<p>设置对象状态为动画结束或开始的状态 </p>
</li>
</ul>
<h2 id="动画执行的次数animation-iteration-count"><a href="#动画执行的次数animation-iteration-count" class="headerlink" title="动画执行的次数animation-iteration-count"></a>动画执行的次数animation-iteration-count</h2><p>也可以像时间管理一样，单独对引进的动画定义循环次数，有两个属性值无限循环和指定次数</p>
<p>infinite 无限循环</p>
<p>number 指定对象动画的具体循环次数 </p>
<p>有延迟参与的循环，只是第一遍有延迟，其余没有。</p>
<p>可以通过修改动画定义来解决这个问题，计算这个延迟占用了动画的多长时间，百分之多少。。。。</p>
<h2 id="建立在源元素的变换"><a href="#建立在源元素的变换" class="headerlink" title="建立在源元素的变换"></a>建立在源元素的变换</h2><p>该变换不会被继承，对其应用动画时，需要重新添加它原先设定的变换。</p>
<p>如果有伪对象的话，伪对象是根据父级来定义自己的，不用管这些伪对象。</p>
<h2 id="动画方向animation-direction"><a href="#动画方向animation-direction" class="headerlink" title="动画方向animation-direction"></a>动画方向animation-direction</h2><p><strong>normal</strong>： 正常方向 </p>
<p><strong>reverse</strong>： 反方向运行 </p>
<p><strong>alternate</strong>： 动画先正常运行再反方向运行，并持续交替运行 </p>
<p><strong>alternate-reverse</strong>： 动画先反运行再正方向运行，并持续交替运行 </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">alternate：v. （使）交替，（使）轮流</span><br><span class="line">adj. 交替的，轮流的, 间隔的，每隔（……天等）的, （一或多个事物）另外的，可供选择的, （两者）互不相容的, 另类的，非传统的, （叶、芽）互生的</span><br><span class="line">n. 替换物，代理人</span><br></pre></td></tr></table></figure>

<h2 id="弹跳小球"><a href="#弹跳小球" class="headerlink" title="弹跳小球"></a>弹跳小球</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>弹跳小球<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">			* &#123;</span><br><span class="line">				margin: 0;</span><br><span class="line">				padding: 0;</span><br><span class="line">				box-sizing: border-box;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			body &#123;</span><br><span class="line">				height: 100vh;</span><br><span class="line">				display: flex;</span><br><span class="line">				flex-direction: column;</span><br><span class="line">				justify-content: center;</span><br><span class="line">				align-items: center;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			main &#123;</span><br><span class="line">				margin: 0 auto;</span><br><span class="line"><span class="css">				<span class="comment">/* 将本身居中 */</span></span></span><br><span class="line">				width: 100px;</span><br><span class="line">				height: 100px;</span><br><span class="line">				background-image: radial-gradient(yellow, orange);</span><br><span class="line">				border-radius: 50%;</span><br><span class="line">				animation-name: td;</span><br><span class="line">				animation-duration: 2s;</span><br><span class="line">				animation-iteration-count: infinite;</span><br><span class="line">				animation-direction: alternate-reverse;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line">			section &#123;</span><br><span class="line"><span class="css">				<span class="comment">/* 制作阴影 */</span></span></span><br><span class="line">				width: 130px;</span><br><span class="line">				height: 40px;</span><br><span class="line"><span class="css">				<span class="selector-tag">background-color</span>: <span class="selector-id">#2C3E50</span>;</span></span><br><span class="line">				margin: -20px auto;</span><br><span class="line">				border-radius: 50%;</span><br><span class="line">				filter: blur(10px);</span><br><span class="line">				z-index: -1;</span><br><span class="line"></span><br><span class="line">				animation-name: scale;</span><br><span class="line">				animation-duration: 2s;</span><br><span class="line">				animation-iteration-count: infinite;</span><br><span class="line">				animation-direction: alternate-reverse;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="keyword">@keyframes</span> td &#123;</span></span><br><span class="line">				from &#123;</span><br><span class="line">					transform: translateY(0);</span><br><span class="line">				&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">				to &#123;</span><br><span class="line">					transform: translateY(-250px);</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line"></span><br><span class="line"><span class="css">			<span class="keyword">@keyframes</span> scale &#123;</span></span><br><span class="line">				0% &#123;</span><br><span class="line">					transform: scale(1);</span><br><span class="line">				&#125;</span><br><span class="line"></span><br><span class="line">				100% &#123;</span><br><span class="line">					transform: scale(0);</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		<span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">main</span>&gt;</span><span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">section</span>&gt;</span><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="微场景动画"><a href="#微场景动画" class="headerlink" title="微场景动画"></a>微场景动画</h2><p>好像没有涉及过渡，是结合变化与动画的新学习内容。</p>
<p>过渡也是做动画，但是这个是帧动画。</p>
<p>这里插一下<strong>background</strong>的综合写法：</p>
<p>取值，请根据这个退出综合写法：</p>
<ul>
<li><p>background-image： 指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像” </p>
</li>
<li><p>background-position： 指定背景图像在元素中出现的位置。 </p>
</li>
<li><p>background-size： 指定背景图像尺寸。 </p>
</li>
<li><p>background-repeat： 指定背景图像如何填充。 </p>
</li>
<li><p>background-attachment： 定义滚动时背景图像相对于谁固定。 </p>
</li>
<li><p>background-origin： 指定背景图像从元素的哪个区域作为显示的原点。 </p>
</li>
<li><p>background-clip： 指定背景图像向外裁剪的区域。 </p>
</li>
<li><p>background-color： 指定背景颜色。 </p>
</li>
</ul>
<p>背景，<strong>位置XY</strong>，尺寸XY，<strong>repeat</strong>，<strong>相对于哪个盒子固定</strong>，显示原点origin，<strong>裁切盒子</strong>，颜色</p>
<h2 id="贝塞尔曲线控制动画速率"><a href="#贝塞尔曲线控制动画速率" class="headerlink" title="贝塞尔曲线控制动画速率"></a>贝塞尔曲线控制动画速率</h2><p>写到了<strong>动画用时函数</strong> animation-timing-function</p>
<p>可以给一堆，就像过渡学到的transition-timing-function：</p>
<p>[<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="https://imgchr.com/i/DmIxud" alt="DmIxud.png](https://s3.ax1x.com/2020/11/18/DmIxud.png)" title="">
                </div>
                <div class="image-caption">DmIxud.png](https://s3.ax1x.com/2020/11/18/DmIxud.png)</div>
            </figure></p>
<p>cubic-bezier(左下角X，Y，右下角X，Y)，float值为0-1</p>
<h2 id="盒子阴影与currentColor"><a href="#盒子阴影与currentColor" class="headerlink" title="盒子阴影与currentColor"></a>盒子阴影与currentColor</h2><p>box-shadow：水平 垂直 半径(模糊度) 颜色；</p>
<p>box-shadow，一个盒子可以有多个阴影，每写完一组上面的四个参数，就可以加个逗号再写一组，这样就生产出来了省略号，就像加载动画！这属于利用box-shadow的多阴影特性。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">        body &#123;</span><br><span class="line">            width: 100vw;</span><br><span class="line">            height: 100vh;</span><br><span class="line">            display: flex;</span><br><span class="line">            justify-content: center;</span><br><span class="line">            align-items: center;</span><br><span class="line"><span class="css">            <span class="selector-tag">background</span>: <span class="selector-id">#34495e</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        button &#123;</span><br><span class="line">            padding: 10px 50px;</span><br><span class="line">            outline: none;</span><br><span class="line"><span class="css">            <span class="selector-tag">background</span>: <span class="selector-id">#e67e22</span>;</span></span><br><span class="line">            font-size: 2em;</span><br><span class="line">            border: solid 5px white;</span><br><span class="line">            color: white;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">        <span class="selector-tag">button</span><span class="selector-pseudo">::after</span> &#123;</span></span><br><span class="line">            content: '';</span><br><span class="line">            display: inline-block;</span><br><span class="line">            height: 3px;</span><br><span class="line">            width: 3px;</span><br><span class="line">            box-shadow: 3px 0 currentColor, 9px 0 currentColor, 15px 0 currentColor;</span><br><span class="line"><span class="css">            <span class="comment">/*这属于使用阴影偏移位置创造出了加载的三个点*/</span></span></span><br><span class="line">            animation-name: point;</span><br><span class="line"><span class="css">            <span class="comment">/*指定动画名称*/</span></span></span><br><span class="line">            animation-duration: 1s;</span><br><span class="line"><span class="css">            <span class="comment">/*持续一秒*/</span></span></span><br><span class="line">            animation-iteration-count: infinite;</span><br><span class="line"><span class="css">            <span class="comment">/*循环加载*/</span></span></span><br><span class="line">            animation-timing-function: linear;</span><br><span class="line"><span class="css">            <span class="comment">/*线性速率*/</span></span></span><br><span class="line">            margin-left: 5px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">        <span class="keyword">@keyframes</span> point &#123;</span></span><br><span class="line">            from &#123;</span><br><span class="line">                box-shadow: none;</span><br><span class="line"><span class="css">                <span class="comment">/*这个进度创造出了〇个点，清空所有点*/</span></span></span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            30% &#123;</span><br><span class="line">                box-shadow: 3px 0 currentColor;</span><br><span class="line"><span class="css">                <span class="comment">/*这个进度创造出了一个点*/</span></span></span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            60% &#123;</span><br><span class="line">                box-shadow: 3px 0 currentColor, 9px 0 currentColor;</span><br><span class="line"><span class="css">                <span class="comment">/*这个进度创造出了两个点*/</span></span></span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            90% &#123;</span><br><span class="line">                box-shadow: 3px 0 currentColor, 9px 0 currentColor, 15px 0 currentColor;</span><br><span class="line"><span class="css">                <span class="comment">/*这个进度创造出了三个点*/</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-code"</span> <span class="attr">aria-hidden</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        提交</span><br><span class="line">    <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="步进动画animation-timing-function"><a href="#步进动画animation-timing-function" class="headerlink" title="步进动画animation-timing-function"></a>步进动画animation-timing-function</h2><p>step(帧数，位态)</p>
<p>如果位态是start，将会在第一时间触发动画</p>
<p>如果位态是end，将会在第一时间位于初始状态</p>
<p>同样拥有：</p>
<ul>
<li>step-start： 等同于 steps(1, start) </li>
<li>step-end： 等同于 steps(1, end) </li>
</ul>
<h2 id="动画-播放-情形：running-paused"><a href="#动画-播放-情形：running-paused" class="headerlink" title="动画-播放-情形：running | paused"></a>动画-播放-情形：running | paused</h2><p>animation-play-state</p>
<h2 id="动画系列的都拥有可以设置多个或者多组的属性值。"><a href="#动画系列的都拥有可以设置多个或者多组的属性值。" class="headerlink" title="动画系列的都拥有可以设置多个或者多组的属性值。"></a>动画系列的都拥有可以设置多个或者多组的属性值。</h2><h2 id="动画填充模式-animation-fill-mode"><a href="#动画填充模式-animation-fill-mode" class="headerlink" title="动画填充模式 animation-fill-mode"></a>动画填充模式 animation-fill-mode</h2><ul>
<li>none： 默认值。不设置对象动画之外的状态 </li>
<li>forwards： 设置对象状态为动画结束时的状态 </li>
<li>backwards： 设置对象状态为动画开始时的状态 </li>
<li>both： 设置对象状态为动画结束或开始的状态 </li>
</ul>
<h2 id="综合写法-animation"><a href="#综合写法-animation" class="headerlink" title="综合写法 animation"></a>综合写法 animation</h2><p>animation: <strong>name</strong> duration <strong>timing-function</strong> delay <strong>iteration-count</strong> direction <strong>fill-mode</strong> play-state;</p>
<p><strong>名字</strong>，持续，<strong>线性与步进</strong>，延迟，<strong>次数</strong>，方向，<strong>填充模式</strong>，播放情形</p>

        </div>

        <blockquote class="post-copyright">
    
    <div class="content">
        
<span class="post-time">
    Last updated: <time datetime="2020-11-19T04:37:03.055Z" itemprop="dateUpdated">2020-11-19 12:37:03</time>
</span><br>


        
        这里可以写作者留言，标签和 hexo 中所有变量及辅助函数等均可调用，示例：<a href="/blog/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/" target="_blank" rel="external">https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/</a>
        
    </div>
    
    <footer>
        <a href="https://gitee.com/songbug/blog.git">
            <img src="/blog/img/avatar.jpg" alt="Song Wani">
            Song Wani
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            

            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/&title=《CSS技能进阶》 — SongKaBaKa&pic=https://gitee.com/songbug/blog.git/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/&title=《CSS技能进阶》 — SongKaBaKa&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《CSS技能进阶》 — SongKaBaKa&url=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/&via=https://gitee.com/songbug/blog.git" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/blog/2020/11/17/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">JavaScript学习笔记</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/blog/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">CSS3的再学习</h4>
      </a>
    </div>
  
</nav>



    




















</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        谢谢大爷~
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/blog/img/wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check"
                data-wechat="/blog/img/wechat.jpg" data-alipay="/blog/img/alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
            <span>This blog is licensed under a <a rel="license noopener" href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.</span>
        </p>
    </div>
    <div class="bottom">
        <p><span>Song Wani &copy; 2019 - 2021</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/&title=《CSS技能进阶》 — SongKaBaKa&pic=https://gitee.com/songbug/blog.git/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/&title=《CSS技能进阶》 — SongKaBaKa&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《CSS技能进阶》 — SongKaBaKa&url=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/&via=https://gitee.com/songbug/blog.git" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=https://gitee.com/songbug/blog.git/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/blog/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
